<template>
<div :class="$style.container">
  <div :class="$style.left">
    <span :class="$style.text">实付</span>
    <span :class="$style.price">￥{{total.toFixed(2)}}</span>
  </div>
  <div :class="$style.right" @click.stop="$emit('submit')">
    <span :class="$style.btn">提交订单</span>
  </div>
</div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang='less' module>
.container {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height:50px;
  
  .left {
    padding-left: 50px;
    box-sizing: border-box;
    width: 280px;
    height:50px;
    line-height: 50px;
    // text-align: center;
    font-size:16px;
    box-shadow: 0 -2px 4px 0 rgba(0,0,0,.1);
    .text {
      color: #2B333B; 
    }
    .price {
      margin-left:4px;
      color: #ff3557;
    }
  }
  .right {
    .btn {
      display: inline-block;
      width:95px;
      height:50px;
      line-height: 50px;
      text-align: center;
      background: #FF2D50;
      color:#fff;
      font-size:16px;
      box-shadow: 0 -1px 4px 0 #FF2D50;
    }
  }
}

</style>